<template>
  <q-page>
    <div class="container">
      <div class="text-center text-h4">Login</div>
      <q-card class="q-mt-md q-pa-md">
        <q-form @submit="submit">
          <q-input v-model="account"
                   label="Username / E-mail"
                   dense
                   :rules="[
                     val => val.length >= 0 || 'Please input your username or e-mail!'
                   ]"/>
          <q-input v-model="password"
                   type="password"
                   label="Password"
                   dense
                   :rules="[
                     val => val.length >= 0 || 'Please input your password!'
                   ]"/>
          <q-btn class="full-width" color="primary" label="login" type="submit"/>
        </q-form>
      </q-card>
    </div>
  </q-page>
</template>

<script>
  import {Account} from "src/lib/Account";

  export default {
    name: "Login",
    data: function () {
      return {
        account: '',
        password: ''
      };
    },
    methods: {
      async submit() {
        this.$q.loading.show();
        try {
          if (await Account.login(this.account, this.password, this.$store)) {
            this.$q.notify({
              message: 'Success',
              caption: 'Login successfully!',
              icon: 'check'
            });
            await this.$router.push('/');
          };
        } catch {
        }
        this.$q.loading.hide();
      }
    }
  }
</script>

<style scoped>

</style>
